<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>进度条和Well组件</title>
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body style="margin:100px">
<!-- 
	1.well组件(这个组件可以实现简单的嵌入式效果)
		1)	.well
		2)	.well-lg
			.well-sm
			没有.well-xs

	2.进度条组件
		1)	.progress 					//对div的父级容器
		2)	.progress-bar 				//对div本身

		3)	style="width: _%;"   		//纯css样式,对div添加。进度条当前的进度
					min-width: _%		//纯css样式,对div添加。

		4)  .progress-bar-success 		//进度条样式
			.progress-bar-info
			.progress-bar-warning
			.progress-bar-danger

		5)	.progress-bar-striped 		//条纹式。【IE9及以下不支持】
		6)	.active 					//动画效果。需要5)和6)一起配和

	3.堆叠效果
		1)	多种样式配合
 -->

 	<!-- well组件 -->
	<!-- <div class="well">
		Boostrap
	</div> -->
	
	<!-- 进度条组件 + 动画效果 -->
	<!-- <div class="progress">
		<div class="progress-bar progress-bar-striped active" style="width: 60%;">60%</div>
	</div> -->

	<!-- 最小进度 -->
	<!-- <div class="progress">
		<div class="progress-bar" style="min-width: 2%; width: 0%;">0%</div>
	</div> -->

	<!-- 堆叠效果 -->
	<div class="progress">
		<div class="progress-bar progress-bar-danger" style="min-width: 20%; width: 20%">20%</div>
		<div class="progress-bar progress-bar-warning" style="min-width: 20%; width: 40%">40%</div>
		<div class="progress-bar progress-bar-success" style="min-width: 20%; width: 40%">40%</div>
	</div>



	<script src="bootstrap-3.3.5-dist/jquery/jquery.min.js"></script>
	<script src="bootstrap-3.3.5-dist/bootstrap/bootstrap.min.js"></script>
</body>
</html>